import React from "react";
import {Form, Layout, Button, Select, List, Icon, Divider} from 'antd';
import {fetchDatabaseListApi, fetchTableListByDbIdApi} from '../api/databaseManager';
import {Switch, Route, Link} from 'react-router-dom';
import Database from "../component/Database";

const {
    Header, Sider, Content,
} = Layout;

const Option = Select.Option;

class DatabaseManager extends React.Component {


    state = {
        selectedDatabaseId: 0, // 已选中数据库ID
        databaseList: [],
        tableList: []
    }

    constructor(props, context) {
        super(props, context);
    }

    componentDidMount() {
        document.title = '数据库管理';
        fetchDatabaseListApi().then(res => {
            const databaseList = res.data.data;
            this.setState({...this.state, databaseList})
        })
    }

    changeDatabase = (val) => {
        if(val === 0) {
            this.setState({...this.state, tableList: [], selectedDatabaseId: 0})
            window.location.href = '#/databaseManager/info/0';
        } else {
            fetchTableListByDbIdApi(val).then(res => {
                this.setState({...this.state, tableList: res.data.data, selectedDatabaseId: val})
                window.location.href = '#/databaseManager/info/' + val;
            })
        }
    }

    render() {

        return (
            <Layout>
                <Sider width={360} style={{backgroundColor: '#333'}}>
                    <div className="logo">数据库管理</div>
                    <div style={{padding: 10}}>
                        <Select style={{width: '100%'}}
                                placeholder="选择或添加数据库"
                                onChange={this.changeDatabase}
                                dropdownRender={menu => (
                                    <div>{menu}</div>
                                )}>

                            <Option key={'_db_0'} value={0}>添加数据库</Option>
                            {this.state.databaseList.map(db => <Option key={'_db_' + db.id} value={db.id}>{db.dbName}</Option>)}

                        </Select>
                        <h3>TABLES</h3>
                        <List className={"database-list"}
                              size="small"
                              dataSource={this.state.tableList}
                              renderItem={item => (<List.Item><span>{item.name}</span>
                                  <div style={{float: 'right'}}>{item.comment}</div>
                              </List.Item>)}
                        />
                    </div>

                </Sider>

                <Layout>

                    {/** 顶部按钮 */}
                    <Header style={{background: '#fff', padding: 0}}>
                        <div style={{paddingLeft: '18px'}}>
                            <Button style={{display: (this.state.selectedDatabaseId ? '' : 'none')}} type="primary"
                                    onClick={() => {


                                        window.location.href = '#/databaseManager/info/' + this.state.selectedDatabaseId;


                                    }}>数据库详情</Button>
                        </div>
                    </Header>

                    {/** 页面操作内容 */}
                    <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>


                        {/* 路由器 */}
                        <Switch>


                            <Route path='/databaseManager/info/:dbId' component={Database}/>


                        </Switch>

                    </Content>
                </Layout>
            </Layout>
        )
    }
}

export default Form.create()(DatabaseManager);
